<template>
	<view class="page-content">
		<card2 v-if="basinDate != null" title="流域监测" :pickerDate="basinDate" :pickerDateIndex.sync="pickerDateIndex" class="m-card">
			<view class="m-card-content p-content">
				<image class="img" src="@/static/mapMonitor/ly.png" mode="widthFix"></image>
				<view class="items">
					<view class="item" v-for="(item, index) in basinDate[pickerDateIndex].value" :key="index">
						<view class="title">{{ index }}</view>
						<view class="value">
							<text>{{ item.value }}</text>
							{{ item.unit }}
						</view>
					</view>
				</view>
			</view>
		</card2>
		<card2 v-if="waterQuality != null" title="水质监测" :pickerDate="waterQuality" :pickerDateIndex.sync="tabDateIndex" class="m-card">
			<view v-if="'list' in waterQuality[tabDateIndex] && waterQuality[tabDateIndex].list.length > 0" class="m-card-content r-content">
				<view class="items">
					<view class="flex flex-middle item" v-for="(item, index) in waterQuality[tabDateIndex].list" :key="index">
						<view class="flex-item title">{{ item.KEY }}</view>
						<view class="value">
							<text class="num">{{ item.VALUE }}</text>
							<text class="unit">{{ item.UNIT }}</text>
						</view>
					</view>
				</view>
			</view>
		</card2>
		<card2 v-if="microorganism != null" title="微生物分析" :pickerDate="microorganism" :pickerDateIndex.sync="microorganismIndex" class="m-card">
			<view class="m-card-content microorganism">
				<view class="sample">
					<view class="title">样品状态</view>
					<view class="value">{{ microorganismypzt }}</view>
				</view>
				<view class="items">
					<view class="col" v-for="(arr, j) in microorganismkeys" :key="j">
						<view class="row title">{{ arr.name }}</view>
						<view class="row" v-for="(item, index) in microorganism[microorganismIndex].list" :key="index">{{ item[arr.name][arr.value] }}</view>
					</view>
				</view>
			</view>
		</card2>
		<card2 v-if="Blowdown != null" title="排污口监测" :pickerDate="Blowdown" :pickerDateIndex.sync="BlowdownPIndex" class="m-card">
			<view class="m-card-content">
				<scollBar3 :tab="['月度分析', '趋势分析']" @change="BlowdownChange"></scollBar3>
				<view v-if="BlowdownIndex === 1" class="woodlandWar">
					<view class="woodlandItem" v-for="(item, index) in Blowdown[BlowdownPIndex].value[BlowdownIndex]" :key="index">
						<image class="left" mode="aspectFill" :src="item.ico"></image>
						<view class="right">
							<view class="top">{{ item.KEY }}</view>
							<view class="center">
								<view class="value">{{ item.VALUE }}</view>
								<view class="unit">{{ item.UNIT }}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="BlowdownIndex === 2" class="BlowdownSwiper">
					<!-- previous-margin="20rpx"
						next-margin="20rpx" -->
					<swiper class="swiper" :indicator-dots="true" circular="true" :autoplay="true" :interval="5000" :duration="500" @change="swierChange">
						<swiper-item>
							<view :class="currentIndex === 0 ? 'active' : ''" class="swiperItem">
								<view class="flex charts-title">
									<view class="flex-item title">{{ Blowdown[BlowdownPIndex].value[BlowdownIndex][0].name }}趋势图</view>
									<view class="unit">单位：{{ Blowdown[BlowdownPIndex].value[BlowdownIndex][0].unit }}</view>
								</view>
								<view class="charts"><l-echart canvas-id="BlowdownSwiperA" id="BlowdownSwiperA" ref="BlowdownSwiperA"></l-echart></view>
							</view>
						</swiper-item>
						<swiper-item>
							<view :class="currentIndex === 1 ? 'active' : ''" class="swiperItem">
								<view class="flex charts-title">
									<view class="flex-item title">{{ Blowdown[BlowdownPIndex].value[BlowdownIndex][1].name }}趋势图</view>
									<view class="unit">单位：{{ Blowdown[BlowdownPIndex].value[BlowdownIndex][1].unit }}</view>
								</view>
								<view class="charts"><l-echart canvas-id="BlowdownSwiperB" id="BlowdownSwiperB" ref="BlowdownSwiperB"></l-echart></view>
							</view>
						</swiper-item>
						<swiper-item>
							<view :class="currentIndex === 2 ? 'active' : ''" class="swiperItem">
								<view class="flex charts-title">
									<view class="flex-item title">{{ Blowdown[BlowdownPIndex].value[BlowdownIndex][2].name }}趋势图</view>
									<view class="unit">单位：{{ Blowdown[BlowdownPIndex].value[BlowdownIndex][2].unit }}</view>
								</view>
								<view class="charts"><l-echart canvas-id="BlowdownSwiperC" id="BlowdownSwiperC" ref="BlowdownSwiperC"></l-echart></view>
							</view>
						</swiper-item>
						<swiper-item>
							<view :class="currentIndex === 3 ? 'active' : ''" class="swiperItem">
								<view class="flex charts-title">
									<view class="flex-item title">{{ Blowdown[BlowdownPIndex].value[BlowdownIndex][3].name }}趋势图</view>
									<view class="unit">单位：{{ Blowdown[BlowdownPIndex].value[BlowdownIndex][3].unit }}</view>
								</view>
								<view class="charts"><l-echart canvas-id="BlowdownSwiperD" id="BlowdownSwiperD" ref="BlowdownSwiperD"></l-echart></view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</card2>
		<card2 title="畜洪风险区域监测" v-if="floodStorage != null" class="m-card" :pickerDate="floodStorage" :pickerDateIndex.sync="floodStorageIndex">
			<view class="m-card-content floodStorage">
				<view class="titleWar">
					<view class="left">实时水位</view>
					<view class="right">
						<view
							class="num"
						>
							{{ floodStorage[floodStorageIndex].list.waterLevel }}
						</view>
						<view class="unit">mm</view>
					</view>
				</view>
				<view class="charts-box">
					<view class="flex charts-title">
						<view class="flex-item title">近7天水位变化情况</view>
						<view class="unit">单位：mm</view>
					</view>
					<view class="charts"><l-echart canvas-id="canvasLineB" id="canvasLineB" ref="canvasLineB"></l-echart></view>
				</view>
			</view>
		</card2>
		<card2 v-if="ecological != null" title="生态工程" class="m-card" :pickerDate="ecological" :pickerDateIndex.sync="ecologicalIndex">
			<view v-if="ecologicalEngineeringIntroduce != null" class="m-card-content r-content" style="padding-top: 0;">
				<view class="introduceWar">
					<view class="row">
						<view class="item">
							<view class="l">工程名称：</view>
							<view class="r">{{ ecologicalEngineeringIntroduce.name }}</view>
						</view>
					</view>
					<view class="row">
						<view class="item">
							<view class="l">工程介绍：</view>
							<view class="r">{{ ecologicalEngineeringIntroduce.introduce }}</view>
						</view>
					</view>
					<view class="row">
						<view class="item">
							<view class="l">工程造价：</view>
							<view class="r">{{ ecologicalEngineeringIntroduce.cost }}</view>
						</view>
					</view>
					<view class="row">
						<view class="item">
							<view class="l">修复位置:</view>
							<view class="r">{{ ecologicalEngineeringIntroduce.position }}</view>
						</view>
					</view>
					<view class="row">
						<view class="item">
							<view class="l">修复措施：</view>
							<view class="r">{{ ecologicalEngineeringIntroduce.repair_step }}</view>
						</view>
					</view>
					<scollBar3 style="margin-top: 40rpx" :tab="['修复前后郁闭度对比', '修复前后固碳量对比']" @change="contrastChange"></scollBar3>
					<view v-if="contrastIndex == 1" class="charts-box engineering">
						<view class="charts"><l-echart canvas-id="engineeringA" id="engineeringA" ref="engineeringA"></l-echart></view>
					</view>
					<view v-if="contrastIndex == 2" class="charts-box">
						<view class="flex charts-title">
							<view class="flex-item title">固碳量对比图</view>
							<view class="unit">单位：吨</view>
						</view>
						<view class="charts"><l-echart canvas-id="engineeringB" id="engineeringB" ref="engineeringB"></l-echart></view>
					</view>
					<swiper
						v-if="switchs != null"
						class="swiper"
						previous-margin="60rpx"
						next-margin="60rpx"
						:indicator-dots="false"
						:autoplay="autoplay"
						:interval="interval"
						:duration="duration"
						circular="true"
						@change="swierChange1"
					>
						<swiper-item v-for="(item, index) in switchs" :key="'D' + index">
							<image :class="switchIndex === index ? 'active' : ''" class="swImage" :src="item.url" mode="aspectFill"></image>
							<view class="swtitle">{{ item.name }}</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</card2>
		<card2 title="河道生态修复规划" class="m-card" v-if="riverWayMood != null">
			<view class="m-card-content r-content">
				<!-- <scollBar3 :tab="['土壤要求', '植物要求']" @change="riverWayMoodChange"></scollBar3>
				<view class="riverWayMoodWar">
					<view class="riverWayMood" v-for="(item, index) in riverWayMood[riverWayMoodIndex]" :key="index">
						<image class="left" :src="item.ico" mode="aspectFill"></image>
						<view class="right">
							<view class="KEY">{{ item.KEY }}</view>
							<view class="VALUE">
								<view class="num">{{ item.VALUE }}</view>
								<view class="unit">{{ item.UNIT }}</view>
							</view>
						</view>
					</view>
				</view>
				 -->
				<view class="riverWayMoodItemWar">
					<view class="item" @click="goPage(1)">
						<view class="span">土壤修复方案</view>
						<image class="image" src="../../static/monitor/riverWayMood001.png" mode="aspectFill"></image>
					</view>
					<view class="item" @click="goPage(2)">
						<view class="span">植物修复方案</view>
						<image class="image" src="../../static/monitor/riverWayMood002.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="fileBTN" @click="downloadFile" type="default">修复规划文件下载</view>
			</view>
		</card2>
	</view>
</template>

<script>
import * as echarts from '@/uni_modules/lime-echart/components/l-echart/echarts';
import scollBar3 from '@/components/scroll-bar/scroll-bar3.vue';
import card2 from '@/components/card/card2.vue';
export default {
	data() {
		return {
			OBJDate: null,
			ecologicalOBJ: null,
			ecologicalIndex: 0,
			pickerDateIndex: 0,
			tabDateIndex: 0,
			BlowdownPIndex: 0,
			BlowdownIndex: 1,
			riverWayMoodIndex: 1,
			microorganismIndex: 0,
			floodStorageIndex: 1,
			currentIndex: 0,
			date: '2021-02-24',
			startDate: '2021-01-01',
			endDate: '2022-01-01',
			array: [],
			dataResource: '',
			dateArray: [],
			dateIndex: 0,
			planData: '',
			monitoringData: '',
			planName: {
				优: 'excellent',
				良: 'good',
				中: 'in',
				差: 'difference'
			},
			gethstxfgcByNameString: '和林格尔新区什拉乌素河上游段河道治理及生态绿化工程（呼朔段）',
			axisLabel: {
				interval: 0,
				formatter: function(value) {
					// debugger;
					var ret = ''; //拼接加\n返回的类目项
					var maxLength = 1; //每项显示文字个数
					var valLength = value.length; //X轴类目项的文字个数
					var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
					if (rowN > 1) {
						//如果类目项的文字大于3,
						for (var i = 0; i < rowN; i++) {
							var temp = ''; //每次截取的字符串
							var start = i * maxLength; //开始截取的位置
							var end = start + maxLength; //结束截取的位置
							//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
							temp = value.substring(start, end) + '\n';
							ret += temp; //凭借最终的字符串
						}
						return ret;
					} else {
						return value;
					}
				}
			},
			tooltip: {
				trigger: 'axis'
			},
			yAxis: {
				type: 'value',
				min: function(value) {
					return 0;
				},
				max: function(value) {
					return value.max;
				},
				nameTextStyle: {
					padding: [5, 5, 5, 5]
				}
			},
			autoplay: true,
			interval: 5000,
			duration: 500,
			switchIndex: 0,
			contrastIndex: 1
		};
	},
	watch: {
		floodStorageIndex: function(value) {
			if (this.floodStorage != null) {
				this.opB(this.floodStorageIndex);
			}
		},
		floodStorage: function(value) {
			if (this.floodStorage != null) {
				this.opB(this.floodStorageIndex);
			}
		},
		ecologicalIndex: function(value) {
			this.gethstxfgcByName();
		},
		BlowdownPIndex: function() {
			this.BlowdownCAV();
		},
		BlowdownIndex: function() {
			this.BlowdownCAV();
		}
	},
	computed: {
		basinDate: function({ OBJDate }) {
			let value = null;
			try {
				if (OBJDate != null) {
					value = [];
					let allList = [];
					let nameList = OBJDate.lyjc.option;
					let list = OBJDate.lyjc.data;
					for (var i = 0, len = nameList.length; i < len; i++) {
						allList.splice(
							i,
							0,
							list.filter(item => {
								return item.water_level === nameList[i].type;
							})
						);
					}
					for (let i = 0, len = allList.length; i < len; i++) {
						let VALUES = {};
						// let NAME = {},
						// 	UNIT = {};
						for (let j = 0; j < allList[i].length; j++) {
							VALUES[allList[i][j].length] = {
								value: allList[i][j].water,
								unit: allList[i][j].area
							};
							// NAME[allList[i][j].KEY] = allList[i][j].VALUE;
							// UNIT[allList[i][j].KEY] = allList[i][j].UNIT;
						}
						value.splice(i, 0, {
							name: nameList[i].type,
							value: VALUES
						});
					}
				}
			} catch (e) {
				console.log('basinDate', e);
				value = null;
			}
			return value;
		},
		ecological: function({ OBJDate }) {
			let value = null;
			try {
				if (OBJDate != null) {
					value = OBJDate.lhstgc.option;
					console.log(value);
				}
			} catch (e) {
				console.log('Ecological', e);
				value = null;
			}
			return value;
		},
		ecologicalEngineeringIntroduce: function({ ecologicalOBJ }) {
			let value = null;
			if (ecologicalOBJ != null) {
				try {
					value = ecologicalOBJ.stxfgh[ecologicalOBJ.stxfgh.length - 1];
					console.log(value);
				} catch (e) {
					console.log(e);
					return null;
				}
			}
			return value;
		},
		switchs: function({ ecologicalOBJ }) {
			let value = null;
			if (ecologicalOBJ != null) {
				try {
					value = ecologicalOBJ.stgcico;
				} catch (e) {
					console.log(e);
					return null;
				}
			}
			return value;
		},
		waterQuality: function({ OBJDate }) {
			let value = null;
			try {
				if (OBJDate != null) {
					let option = OBJDate.szjc.option;
					let data = OBJDate.szjc.data;
					value = [];
					for (let i = 0, len = option.length; i < len; i++) {
						value[i] = {
							name: option[i].type
						};
						value[i].list = data.filter(item => {
							return item.TYPE == option[i].type;
						});
					}
				}
			} catch (e) {
				console.log('waterQuality', e);
				value = null;
			}
			return value;
		},
		Blowdown: function({ OBJDate }) {
			let value = null;
			try {
				if (OBJDate != null) {
					value = [];
					for (var i = 0; i < OBJDate.pwkjc.dqz.length; i++) {
						value.splice(i, 0, {
							name: OBJDate.pwkjc.dqz[i],
							value: {}
						});
					}
					for (var i = 0; i < value.length; i++) {
						let obj = OBJDate.pwkjc.leftSelect.filter(item => {
							return item.name == value[i].name;
						});
						let obj1 = OBJDate.pwkjc.ajdfx.filter(item => {
							return item.name == value[i].name;
						});
						value[i].value['1'] = obj[obj.length - 1].datas;
						value[i].value['2'] = obj1[obj1.length - 1].data;
					}
					console.log('123123', value);
				}
			} catch (e) {
				console.log('Blowdown', e);
				value = null;
			}
			return value;
		},
		microorganism: function({ OBJDate }) {
			let value = null;
			try {
				if (OBJDate != null) {
					value = [];
					let wswfx = this.OBJDate.wswfx;
					let datas = this.OBJDate.wswfx.datas;
					let keys = this.OBJDate.wswfx.keys;
					let list = [];
					for (var i = 0; i < wswfx.wswfxOption.length; i++) {
						let item = [];
						value.splice(i, 1, {
							name: wswfx.wswfxOption[i].hlmc
						});
						item = datas.filter(item => {
							return item.HLMC == wswfx.wswfxOption[i].hlmc;
						});
						// console.log(item);
						let YPBH = {};
						for (var j = 0; j < item.length; j++) {
							// console.log(item[j]);
							YPBH[item[j].YPBH] = {};
							let listE = item.filter(items => {
								return items.YPBH == item[j].YPBH;
							});
							for (var s = 0; s < keys.length; s++) {
								// console.log(listE);
								YPBH[item[j].YPBH][keys[s].KEYSS] = listE.filter(items => {
									return items.KEY == keys[s].KEYSS;
								});
								YPBH[item[j].YPBH][keys[s].KEYSS] = YPBH[item[j].YPBH][keys[s].KEYSS][0];
							}
						}
						value[i].list = YPBH;
					}
				}
			} catch (e) {
				console.log('microorganism', e);
				value = null;
			}
			return value;
		},
		microorganismypzt: function({ OBJDate }) {
			let value = null;
			try {
				if (OBJDate != null) {
					value = OBJDate.wswfx.ypzt;
				}
			} catch (e) {
				console.log('microorganismypzt', e);
				value = null;
			}
			return value;
		},
		microorganismkeys: function({ OBJDate }) {
			let value = null;
			try {
				if (OBJDate != null) {
					value = [];
					let list = OBJDate.wswfx.keys;
					for (var i = 0; i < list.length; i++) {
						value.splice(parseInt(list[i].sort) - 1, 0, { name: list[i].KEYSS, value: list[i].name });
					}
				}
			} catch (e) {
				console.log('microorganismkeys', e);
				value = null;
			}
			return value;
		},
		bioDiversity: function({ OBJDate }) {
			let value = null;
			try {
				if (OBJDate != null) {
					value = {};
					let allList = OBJDate.swdyx;

					let VALUES = {};
					for (let j = 0; j < allList.length; j++) {
						VALUES[allList[j].KEY] = {
							value: allList[j].VALUE,
							unit: allList[j].UNIT
						};
					}
					value = {
						value: VALUES
					};
				}
			} catch (e) {
				console.log('bioDiversity', e);
				value = null;
			}
			return value;
		},
		floodStorage: function({ OBJDate }) {
			let value = null;
			try {
				if (OBJDate != null) {
					value = [];
					let list = OBJDate.xhfxq.xhfxqOption;
					for (var i = 0; i < list.length; i++) {
						let values = OBJDate.xhfxq.sw.filter(items => {
							return items.SHID == list[i].sbid;
						});
						let cavn = OBJDate.xhfxq.datas.filter(items => {
							return items.name == list[i].sbid;
						});
						let ee = {
							name: list[i].sbid,
							list: {
								waterLevel: values[values.length - 1].VALUE,
								cavn: cavn[cavn.length - 1]
							}
						};
						value.splice(i, 0, ee);
					}
				}
			} catch (e) {
				console.log('floodStorage', e);
				value = null;
			}
			return value;
		},
		riverWayMood: function({ OBJDate }) {
			let value = null;
			try {
				if (OBJDate != null) {
					value = {};
					value[1] = OBJDate.sthdxfjh.tryq;
					value[2] = OBJDate.sthdxfjh.zwyq;
				}
			} catch (e) {
				console.log('riverWayMood', e);
				value = null;
			}
			return value;
		}
	},
	components: {
		card2,
		scollBar3
	},
	onLoad() {
		this.getData();
	},
	methods: {
		swierChange1(e) {
			this.switchIndex = e.detail.current;
		},
		goPage(index) {
			uni.navigateTo({
				url: '/pages/mapMonitor/components/mapMonitorPage/mapMonitorPage?type=' + index
			});
		},
		getData() {
			this.$$.request(
				{
					url: this.config.getszlhMessage,
					method: 'GET',
					data: {}
				},
				true,
				true
			)
				.then(res => {
					console.log(res.data, '123');
					if (res.code == 2000) {
						this.OBJDate = res.data;
						this.gethstxfgcByName();
					}
				})
				.catch(error => {
					console.log('程序错误', error.message);
				})
				.finally(() => {
					console.log('complate');
				});
		},
		/**
		 * http://127.0.0.1:8083/appShow/base/gethstxfgcByName?name=和林格尔新区什拉乌素河上游段河道治理及生态绿化工程（呼朔段）
		 * */
		gethstxfgcByName() {
			this.gethstxfgcByNameString = this.ecological[this.ecologicalIndex].name;
			this.$$.request(
				{
					url: 'appShow/base/gethstxfgcByName?name=' + this.gethstxfgcByNameString,
					method: 'GET',
					data: {}
				},
				true,
				true
			)
				.then(res => {
					console.log(res.data, '123');
					if (res.code == 2000) {
						this.ecologicalOBJ = res.data;
						this.engineeringAOP();
					}
				})
				.catch(error => {
					console.log('程序错误', error.message);
				})
				.finally(() => {
					console.log('complate');
				});
		},
		riverWayMoodChange(v) {
			console.log(v);
			this.riverWayMoodIndex = v;
		},
		BlowdownChange(v) {
			this.BlowdownIndex = v;
		},
		getDropDownData(search, callback) {
			this.$$.request(
				{
					url: this.config.getSearchResult + '/' + search,
					method: 'GET',
					data: {}
				},
				true,
				true
			)
				.then(res => {
					console.log(res);
					if (res.code == 2000) {
						callback && callback(res.data);
					}
				})
				.catch(error => {
					console.log('程序错误', error.message);
				})
				.finally(() => {
					console.log('complate');
				});
		},
		getMonitoringData(data) {
			this.monitoringData = data;
		},
		getPlanData(data) {
			this.planData = data;
		},
		downloadFile() {
			plus.nativeUI.toast('开始下载');
			let downloadTask = uni.downloadFile({
				url: this.OBJDate.xfghwj, //仅为示例，并非真实的资源
				success: res => {
					console.log(res);
					plus.nativeUI.closeToast();
					plus.nativeUI.toast('下载成功' + res.tempFilePath);
				},
				fail: res => {
					console.log(res);
					plus.nativeUI.toast('下载失败');
				}
			});
			downloadTask.onProgressUpdate(res => {
				console.log(res);
				// plus.nativeUI.closeToast();
				if (res.progress < 98) {
					plus.nativeUI.toast(res.progress + '%');
				}
			});
		},
		swierChange(e) {
			this.currentIndex = e.detail.current;
		},
		BlowdownCAV() {
			let value = this.Blowdown[this.BlowdownPIndex].value[this.BlowdownIndex];
			console.log(this.BlowdownIndex, this.BlowdownPIndex, value);
			let c0 = {
				name: value[0].name,
				color: ['#00A0E9'],
				grid: [{ left: '10%', top: '5%', right: '5%' }],
				tooltip: this.tooltip,
				xAxis: {
					data: value[0].x,
					type: 'category',
					boundaryGap: false,
					axisTick: {
						inside: true
					},
					axisLine: {
						show: false
					},
					boundaryGap: ['1%', '1%'],
					axisLabel: {
						interval: 0,
						rotate: 40
					},
					minInterval: 1,
					max: 'dataMax',
					scale: true
				},
				yAxis: this.yAxis,
				series: [
					{
						data: value[0].data,
						type: 'line',
						smooth: true,
						barWidth: 16,
						itemStyle: {
							borderRadius: 50
						}
					}
				]
			};
			let c1 = {
				name: value[1].name,
				color: ['#00A0E9'],
				grid: [{ left: '10%', top: '5%', right: '5%' }],
				tooltip: this.tooltip,
				xAxis: {
					data: value[1].x,
					type: 'category',
					boundaryGap: false,
					axisTick: {
						inside: true
					},
					axisLine: {
						show: false
					},
					boundaryGap: ['1%', '1%'],
					axisLabel: {
						interval: 0,
						rotate: 40
					},
					minInterval: 1,
					max: 'dataMax',
					scale: true
				},
				yAxis: this.yAxis,
				series: [
					{
						data: value[1].data,
						type: 'line',
						smooth: true,
						barWidth: 16,
						itemStyle: {
							borderRadius: 50
						}
					}
				]
			};
			let c2 = {
				name: value[2].name,
				color: ['#00A0E9'],
				grid: [{ left: '10%', top: '5%', right: '5%' }],
				tooltip: this.tooltip,
				xAxis: {
					data: value[0].x,
					type: 'category',
					boundaryGap: false,
					axisTick: {
						inside: true
					},
					axisLine: {
						show: false
					},
					boundaryGap: ['1%', '1%'],
					axisLabel: {
						interval: 0,
						rotate: 40
					},
					minInterval: 1,
					max: 'dataMax',
					scale: true
				},
				yAxis: this.yAxis,
				series: [
					{
						data: value[2].data,
						type: 'line',
						smooth: true,
						barWidth: 16,
						itemStyle: {
							borderRadius: 50
						}
					}
				]
			};
			let c3 = {
				name: value[3].name,
				color: ['#00A0E9'],
				grid: [{ left: '10%', top: '5%', right: '5%' }],
				tooltip: this.tooltip,
				xAxis: {
					data: value[3].x,
					type: 'category',
					boundaryGap: false,
					axisTick: {
						inside: true
					},
					axisLine: {
						show: false
					},
					boundaryGap: ['1%', '1%'],
					axisLabel: {
						interval: 0,
						rotate: 40
					},
					minInterval: 1,
					max: 'dataMax',
					scale: true
				},
				yAxis: this.yAxis,
				series: [
					{
						data: value[3].data,
						type: 'line',
						smooth: true,
						barWidth: 16,
						itemStyle: {
							borderRadius: 50
						}
					}
				]
			};
			this.$nextTick(function() {
				this.$refs.BlowdownSwiperA.init(config => {
					const { canvas } = config;
					const chart = echarts.init(canvas, null, config);
					chart.setOption(c0);
					return chart;
				});

				this.$refs.BlowdownSwiperB.init(config => {
					const { canvas } = config;
					const chart = echarts.init(canvas, null, config);
					chart.setOption(c1);
					return chart;
				});
				this.$refs.BlowdownSwiperC.init(config => {
					const { canvas } = config;
					const chart = echarts.init(canvas, null, config);
					chart.setOption(c2);
					return chart;
				});
				this.$refs.BlowdownSwiperD.init(config => {
					console.log(config);
					const { canvas } = config;
					const chart = echarts.init(canvas, null, config);
					chart.setOption(c3);
					return chart;
				});
			});
		},
		opB(value) {
			let list = [];
			console.log(this.floodStorage[value].list.cavn.x);
			if (this.floodStorage != null) {
				for (var i = 0; i < this.floodStorage[value].list.cavn.x.length; i++) {
					list.push(this.OBJDate.xhfxq.xhfxqOption[value].jjsw);
				}
				let canvasLineAOption = {
					name: '近7天水位变化情况',
					color: ['#00A0E9', '#ED4444'],
					tooltip: {
						trigger: 'axis'
					},
					grid: [{ left: '15%', top: '5%', right: '5%' }],
					// grid: {containLabel: true, left: 5, top: 5, right: 5, bottom :5 },
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						data: this.floodStorage[value].list.cavn.x,
						type: 'category',
						boundaryGap: false,
						axisTick: {
							inside: true
						},
						axisLine: {
							show: false
						},
						boundaryGap: ['1%', '1%'],
						axisLabel: {
							interval: 0,
							rotate: 40
						},
						minInterval: 1,
						max: 'dataMax',
						scale: true
					},
					yAxis: {
						type: 'value',
						min: function(value) {
							return 0;
						},
						max: function(value) {
							return value.max;
						},
						nameTextStyle: {
							padding: [5, 5, 5, 5]
						}
					},
					series: [
						{
							data: this.floodStorage[value].list.cavn.datas,
							type: 'bar',
							smooth: true,
							barWidth: 16,
							itemStyle: {
								borderRadius: 50
							}
						},
						{
							data: list,
							type: 'line',
							smooth: true
						}
					]
				};
				this.$nextTick(function() {
					this.$refs.canvasLineB.init(config => {
						const { canvas } = config;
						const chart = echarts.init(canvas, null, config);
						chart.setOption(canvasLineAOption);
						return chart;
					});
				});
			}
		},
		contrastChange(value) {
			console.log(value);
			this.contrastIndex = value;
			this.engineeringAOP();
		},
		engineeringAOP() {
			if (this.ecologicalOBJ == null) {
				return false;
			}
			if (this.contrastIndex == 1) {
				let repair = this.ecologicalOBJ.ybdbh;
				let engineeringAOP = {
					series: [
						{
							type: 'gauge',
							startAngle: 240,
							endAngle: -60,
							min: 0,
							max: 100,
							center: ['25%', '50%'],
							itemStyle: {
								color: '#F8B551'
							},
							pointer: {
								show: false
							},
							progress: {
								show: true,
								overlap: false,
								roundCap: true,
								clip: false,
								itemStyle: {
									borderWidth: 0
								}
							},
							axisLine: {
								lineStyle: {
									width: 10
								}
							},
							splitLine: {
								show: false,
								distance: 0,
								length: 10
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								show: false,
								distance: 50
							},
							data: [
								{
									value: repair[0].VALUE,
									name: repair[0].KEY,
									title: {
										offsetCenter: ['0%', 30]
									},
									detail: {
										offsetCenter: ['0%', -10]
									}
								}
							],
							title: {
								fontSize: 18
							},
							detail: {
								width: 50,
								height: 40,
								fontSize: 28,
								color: 'auto',
								borderColor: 'auto',
								borderRadius: 0,
								borderWidth: 0,
								formatter: '{value}%'
							}
						},
						{
							type: 'gauge',
							startAngle: 240,
							endAngle: -60,
							min: 0,
							max: 100,
							center: ['75%', '50%'],
							itemStyle: {
								color: '#00B27A'
							},
							pointer: {
								show: false
							},
							progress: {
								show: true,
								overlap: false,
								roundCap: true,
								clip: false,
								itemStyle: {
									borderWidth: 0
								}
							},
							axisLine: {
								lineStyle: {
									width: 10
								}
							},
							splitLine: {
								show: false,
								distance: 0,
								length: 10
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								show: false,
								distance: 50
							},
							data: [
								{
									value: repair[1].VALUE,
									name: repair[1].KEY,
									title: {
										offsetCenter: ['0%', 30]
									},
									detail: {
										offsetCenter: ['0%', -10]
									}
								}
							],
							title: {
								fontSize: 18
							},
							detail: {
								width: 50,
								height: 40,
								fontSize: 28,
								color: 'auto',
								borderColor: 'auto',
								borderRadius: 0,
								borderWidth: 0,
								formatter: '{value}%'
							}
						}
					]
				};
				this.$nextTick(function() {
					this.$refs.engineeringA.init(config => {
						const { canvas } = config;
						const chart = echarts.init(canvas, null, config);
						chart.setOption(engineeringAOP);
						return chart;
					});
				});
			} else {
				let repair = this.ecologicalOBJ.gtl;
				repair = repair[repair.length - 1];
				let engineeringBOP = {
					name: '修复前后固碳量对比',
					color: ['#F39800', '#00B27A'],
					grid: { left: '15%', top: '5%', right: '5%' },
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						data: ['修复前', '修复后'],
						type: 'category',
						boundaryGap: false,
						axisTick: {
							inside: true
						},
						axisLine: {
							show: false
						},
						boundaryGap: ['1%', '1%'],
						minInterval: 1,
						max: 'dataMax',
						scale: true
					},
					yAxis: {
						type: 'value',
						min: function(value) {
							return 0;
						},
						max: function(value) {
							return value.max;
						},
						nameTextStyle: {
							padding: [5, 5, 5, 5]
						}
					},
					series: [
						{
							data: [repair.XFQ, ''],
							type: 'bar',
							smooth: true,
							barWidth: 16,
							itemStyle: {
								borderRadius: 50
							}
						},
						{
							data: ['', repair.XFH],
							type: 'bar',
							smooth: true,
							barWidth: 16,
							itemStyle: {
								borderRadius: 50
							}
						}
					]
				};
				this.$nextTick(function() {
					this.$refs.engineeringB.init(config => {
						const { canvas } = config;
						const chart = echarts.init(canvas, null, config);
						chart.setOption(engineeringBOP);
						return chart;
					});
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/common/css/asd.scss';
// page {
// 	background: #f4f4f4;
// }

.page-content {
	// padding: 30rpx;
}
.m-card {
	margin-bottom: 20rpx;
	.m-card-content {
		.img {
			display: block;
			margin: 0 auto;
			width: 200rpx;
			height: 140rpx;
		}
	}
	.p-content {
		position: relative;
		padding: 80rpx 0 125rpx;
		margin: -30rpx 0 -30rpx;
		.img {
			width: 292rpx;
		}
		.items {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		.item {
			width: 36%;
			margin-top: 40rpx;

			&:nth-child(even) {
				.title,
				.value {
					padding-left: 50rpx;
				}
			}
			&:nth-child(odd) {
				padding-left: 30rpx;
			}
		}
		.title {
			font-size: 28rpx;
			color: #333;
		}
		.value {
			font-size: 28rpx;
			color: #999;
			text {
				margin-right: 8rpx;
				font-size: 36rpx;
				color: #00a0e9;
			}
		}
	}
	.r-content {
		position: relative;
		.tag-box {
			position: relative;
			margin-bottom: 60rpx;
		}
		.grade {
			position: absolute;
			top: 10rpx;
			left: 50%;
			font-size: 60rpx;
			color: #00dcb0;
			transform: translateX(-50%);
		}
		.tag {
			position: absolute;
			bottom: -20rpx;
			left: 50%;
			font-size: 28rpx;
			font-weight: 500;
			color: #a0a5ba;
			line-height: 52rpx;
			transform: translateX(-50%);
		}
		.flex {
			padding: 0 30rpx;
			margin-bottom: 20rpx;
			height: 70rpx;
			background: #f8f8f8;
			border-radius: 35rpx;
			&:last-child {
				margin-bottom: 0;
			}
			.title {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				line-height: 1;
			}
			.value {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				font-size: 36rpx;
				color: #00a0e9;
				font-weight: 700;
				text {
					font-size: 30rpx;
					margin-right: 10rpx;
				}
				.num {
					font-size: 36rpx;
					color: #00a0e9;
					font-weight: 700;
				}
				.unit {
					text-align: right;
					min-width: 100rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #999999;
					line-height: 1;
				}
			}
			.uni-input::after {
				font-family: iconfont;
				content: '\e659';
				margin-left: 10rpx;
				font-size: 24rpx;
			}
		}

		.introduceWar {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;
			.charts-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: transparent;
				margin: 10rpx 0;
				padding: 0;
			}
			.row {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: flex-start;
				box-sizing: border-box;
				padding: 37rpx 0 36rpx 0;
				border-bottom: 1rpx solid #e5e5e5;
				line-height: 32px;
				&:nth-child(1) {
					padding-top: 0;
				}
				.item {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: flex-start;
					font-size: 28rpx;
					font-weight: 500;
					.l {
						min-width: 5em;
						width: 5em;
						color: #333333;
					}
					.r {
						color: #00a0e9;
					}
				}
			}
		}
	}
	.woodlandWar {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 50rpx;
		.woodlandItem {
			width: 330rpx;
			height: 120rpx;
			background: #f3f8f9;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			padding-left: 21rpx;
			box-sizing: border-box;
			margin-bottom: 40rpx;
			.left {
				min-width: 60rpx;
				width: 60rpx;
				height: 60rpx;
				margin-right: 36rpx;
			}
			.right {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: stretch;
				justify-content: center;
				.top {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					line-height: 1;
				}
				.center {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					margin-top: 20rpx;
					.value {
						font-size: 36rpx;
						font-weight: bold;
						color: #00a0e9;
						line-height: 1;
					}
					.unit {
						font-size: 28rpx;
						font-weight: 500;
						color: #999999;
						line-height: 1;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
	.woodlandContWar {
		margin-top: 30rpx;
		width: 100%;
		min-height: 164rpx;
		background: rgba(243, 248, 249, 0);
		border: 1rpx solid #d5d5d5;
		padding: 42rpx 45rpx 41rpx 53rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		line-height: 52rpx;
		box-sizing: border-box;
	}
}
.fileBTN {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100rpx;
	background-color: #ffffff;
	border: 2rpx solid #00a0e9;
	border-radius: 16rpx;
	font-size: 36rpx;
	font-weight: bold;
	color: #00a0e9;
	margin-top: 31rpx;
}
.riverWayMoodWar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
	.riverWayMood {
		width: 50%;
		height: 120rpx;
		background-color: #f5f9f3;
		margin-top: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		padding-left: 21rpx;
		.left {
			min-width: 60rpx;
			width: 60rpx;
			height: 60rpx;
			margin-right: 36rpx;
		}
		.right {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;
			.KEY {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				line-height: 1;
			}
			.VALUE {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.num {
					font-size: 36rpx;
					font-weight: bold;
					color: #32b16c;
					line-height: 1;
					margin-right: 7rpx;
				}
				.unit {
					font-size: 28rpx;
					font-weight: 500;
					color: #999999;
					line-height: 36rpx;
				}
			}
		}
	}
}
.BlowdownSwiper {
	margin-top: 20rpx;
	width: 100%;
	height: 550rpx;
	.swiper {
		position: relative;
		width: 100%;
		height: 100%;

		.swiperItem {
			position: absolute;
			z-index: 5;
			width: 100%;
			height: 80%;
			opacity: 0.5;
			top: 13rpx;
			// margin: 0 20rpx;
			border-radius: 8rpx;
			overflow: hidden;
			background-color: #f3f8f9;
			&.active {
				opacity: 1;
				z-index: 10;
				height: 100%;
				width: 100%;
				top: 0;
				transition: all 0.2s ease-in 0s;
				border-radius: 8rpx;
			}
			.charts-title {
				height: 50rpx;
				padding: 0 30rpx;
				font-size: 24rpx;
				box-sizing: border-box;
				.title {
					color: #333;
				}

				.unit {
					color: #999;
				}
			}
			.charts {
				height: 450rpx;
			}
		}
	}
}
.charts-box {
	.charts-title {
		padding: 30rpx 0 10rpx;
		font-size: 24rpx;

		.title {
			color: #333;
		}

		.unit {
			color: #999;
		}
	}
	.charts {
		width: 100%;
		height: 500rpx;
		background-color: #ffffff;
	}
	&.engineering {
		.charts {
			height: 210px;
		}
	}
}
.microorganism {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	.sample {
		box-sizing: border-box;
		padding: 28rpx 31rpx;
		background-color: #f3f8f9;
		border-radius: 16rpx;
		.title {
			font-size: 36rpx;
			font-weight: 500;
			color: #658592;
			line-height: 1;
			margin-bottom: 25rpx;
		}
		.value {
			font-size: 32rpx;
			font-weight: bold;
			color: #00a0e9;
			line-height: 1;
		}
	}
	.items {
		width: 100%;
		overflow-x: scroll;
		margin-top: 33rpx;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		.col {
			min-width: 240rpx;
			width: 240rpx;
			display: flex;
			flex-direction: column;
			align-items: stretch;
			justify-content: flex-start;
			&:nth-child(1) {
				min-width: 300rpx;
				width: 300rpx;
				.row {
					font-size: 24rpx;
					color: #333333;
				}
			}

			.row {
				&.title {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
				}
				background-color: #f4f4f4;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				width: 100%;
				text-align: center;
				word-wrap: break-word;
				min-height: 60rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #00a0e9;
				line-height: 1;
				&:nth-child(2n) {
					background-color: #ffffff;
				}
			}
		}
	}
}
.floodStorage {
	.titleWar {
		width: 100%;
		min-height: 143rpx;
		background: #6f9be4;
		border-radius: 16rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0 80rpx 0 30rpx;
		.left {
			font-size: 36rpx;
			font-weight: 500;
			color: #ffffff;
			line-height: 1;
		}
		.right {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: flex-end;
			.num {
				font-size: 72rpx;
				font-weight: 500;
				color: #ffffff;
				line-height: 1;
			}
			.unit {
				font-size: 36rpx;
				font-weight: 500;
				color: #ffffff;
				line-height: 1;
			}
		}
	}
}
.riverWayMoodItemWar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	.item {
		position: relative;
		width: 330rpx;
		height: 260rpx;
		border-radius: 4px;
		padding: 50rpx 40rpx;
		box-sizing: border-box;
		.span {
			font-size: 30rpx;
			font-weight: bold;
			color: #ffffff;
			line-height: 1;
		}
		.image {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			width: 120rpx;
			height: 120rpx;
		}
		&:nth-child(1) {
			background: linear-gradient(136deg, #9cbffa, #6f9be4);
		}
		&:nth-child(2) {
			background: linear-gradient(136deg, #4edfa7, #22cc9e);
		}
	}
}
.swiper {
	position: relative;
	width: 100%;
	height: 410rpx;
	margin-top: 20rpx;
	.swImage {
		position: absolute;
		z-index: 5;
		width: 100%;
		height: 384rpx;
		opacity: 0.5;
		top: 13rpx;
		margin: 0 20rpx;
		border-radius: 8rpx;
		overflow: hidden;
		&.active {
			opacity: 1;
			z-index: 10;
			height: 410rpx;
			width: 100%;
			top: 0;
			transition: all 0.2s ease-in 0s;
			border-radius: 8rpx;
		}
	}
	.swtitle {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: absolute;
		width: 150rpx;
		height: 50rpx;
		background-color: #000000;
		opacity: 0.5;
		border-radius: 25rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #ffffff;
		line-height: 50rpx;
		z-index: 20;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}
</style>
